<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>修改信息</title>
</head>
<body>
  <div class="container">
    <h1>修改信息</h1>
    <form id="edit-form">
      <input type="hidden" id="url" name="url" required>
      <div class="input-wrap">
        <label for="name">名称：</label>
        <input type="text" id="name" name="name" required><br>
      </div>
      <div class="input-wrap">
        <label for="desc">简介：</label>
        <textarea id="desc" name="desc" required rows="5"></textarea>
      </div>
      <div class="input-wrap">
        <input type="submit" class="save-btn" value="保存">
      </div>
    </form>
  </div>
  <script>
    // 从URL中获取视频URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const videoUrl = urlParams.get('v');
    if (videoUrl) {
      document.getElementById('url').value = encodeURIComponent(videoUrl);
      getVideoInfo(videoUrl)
    }

    document.getElementById('edit-form').addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());

      if (!data.name) {
        alert('名称')
      }
      fetch('/api/edit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)

      }).then(res => res.json()).then(data => {
        window.location.replace('/index.html')
      })
    });

    function getVideoInfo(url) {
      fetch('/api/info?v=' + encodeURIComponent(url))
      .then(response => response.json())
      .then(res => {
        let data = res.data
        
        document.getElementById('name').value = data.name || '';
        document.getElementById('desc').value = data.desc || '';       
      })
    }
  </script>

</body>
</html>